<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>考勤管理</title>
	<link rel="stylesheet" href="../static/css/kqgl.css">
</head>

<body>

	<!-- <div class="head">
			<div>欢迎进入考勤界面</div>
			<img src="../../img/头像.png" alt="">
			<a href="">Admin</a>
		</div> -->
	<!--		</div>-->
	<!-- <div class="left">
			<img src="../../img/考勤.png" alt="">
			<div class="item">
				考勤明细</div>
		</div> -->
		<form action="">
	<div class="right">
		<div class="Timerange">
			<span class="main">时间范围</span>
			<span class="time mouse selected_time">今天</span>
			<span class="time mouse">昨天</span>
			<span class="time mouse">三天前</span>
			<span class="time mouse">七天前</span>
			<span class="time mouse">本月</span>
			<!-- <span class="time mouse">上月</span> -->
			<span>
				<input id="datetime" type="text" placeholder='2021/05/05'>
				<a href=""><img id="date" src="../static/img/日期.png" alt=""></a>
			</span>
			<span id="to">to</span>
			<span>
				<input id="datetime" type="text" placeholder='截至时间'>
				<a href=""><img id="date" src="../static/img/日期.png" alt=""></a>
		</div>
		<div class="Timerange">
			<span class="main">状态</span>
			<span class="state mouse selected_state">全部</span>
			<span class="state mouse">正常</span>
			<span class="state mouse">异常</span>
		</div>
		<div class="Timerange">
			<span class="main">部门</span>
			<select class="department mouse" name="department" id="">
				<option value="全部">全部</option>
				<option value="人事部">人事部</option>
				<option value="客户部">客户部</option>
				<option value="财务部">财务部</option>
				<option value="1-4">部门4</option>
			</select>
		</div>

		<div class="Timerange">
			<span class="main">用户</span>
			<input type="text" class="dep_id" value="" placeholder="请输入员工ID">
			<img src="../static/img/查询.png" alt="">
			<input class="keys mouse" type="reset" value="重置">
			<input class="search keys mouse " type="button" onclick=post_att() value="搜索">
			<!-- <input class="search keys mouse " type="submit" onclick=post_att() value="搜索"> -->
			<div class="detaillist">
				<div>明细列表</div>
				<input class=" keys mouse" type="submit" value="导出">
			</div>
		</div>
		<table class="datatitle">
			<tr>
				<!-- <td>时间</td> -->
				<td>工号</td>
				<td>用户</td>
				<td>部门</td>
				<td>上线时间</td>
				<td>下线时间</td>
				<td>状态</td>
				
			</tr>
			
		</table>
	</div>
</form>
	<script src="../static/js/jquery.min.js"></script>
	<script>
		// 点击给对应的查找时间和状态添加属性
		$('.time').click(function () {
			$('.selected_time').removeClass('selected_time')
			$(this).addClass('selected_time')
		})
		$('.state').click(function () {
			$('.selected_state').removeClass('selected_state')
			$(this).addClass('selected_state')
		})
		
		$.ajax({
		url: 'http://127.0.0.1:8000/v1/salary/attendance',
		type: 'get',
		success: function (res) {
			if (res.code == 200) {
				$.each(res.att,function(k,v){
					var html_tr=''
					html_tr += '<tr class="html_tr">'
					html_tr += '<td>'+v.emp_id+'</td>'
					html_tr += '<td>'+v.name+'</td>'
					html_tr += '<td>'+v.dep+'</td>'
					html_tr += '<td>'+v.start_time+'</td>'
					html_tr += '<td>'+v.end_time+'</td>'
					html_tr += '<td>'+v.state+'</td>'
					html_tr += '</tr>'
					$('.datatitle').append(html_tr);
				} )
			}else{
				alert(res.error)
			} 
		}
		})
		// 获得搜索的筛选条件
		var time=$('.selected_time').html();
		var state=$('.selected_state').html();
		var department_val=$('.department').val();
		var dep_id=$('.dep_id').val();
		var post_data={"time":time,"state":state,"department":department_val,"dep_id":dep_id};

		function post_att(){
			var time=$('.selected_time').html();
			var state=$('.selected_state').html();
			var department_val=$('.department').val();
			var dep_id=$('.dep_id').val();
			var post_data={"time":time,"state":state,"department":department_val,"dep_id":dep_id};
			$.ajax({
				url: 'http://127.0.0.1:8000/v1/salary/attendance',
				type: 'post',
				contentType: 'application/json',
				dataType:'json',
				data: JSON.stringify(post_data),
				success: function (res) {
					if (res.code == 200) {
						$('.html_tr').remove()
						$.each(res.att,function(k,v){
							var html_tr=''
							html_tr += '<tr class="html_tr">'
							html_tr += '<td>'+v.emp_id+'</td>'
							html_tr += '<td>'+v.name+'</td>'
							html_tr += '<td>'+v.dep+'</td>'
							html_tr += '<td>'+v.start_time+'</td>'
							html_tr += '<td>'+v.end_time+'</td>'
							html_tr += '<td>'+v.state+'</td>'
							html_tr += '</tr>'
							$('.datatitle').append(html_tr);
						} )
					}else{
						alert(res.error)
					} 
				}
			})
		// 	$.ajax({
		// 		url:'http://127.0.0.1:8000/v1/salary/attendance',
		// 		type:'post',
		// 		data:JSON.stringify(post_data),
		// 		contentType:'application/json',
		// 		dataType:'json',
		// 		success:function(res){
		// 			if(res.code == 200){
		// 				alert('添加成功');	
		// 				$.each(res.att,function(k,v){
		// 					var html_tr=''
		// 					html_tr += '<tr class="html_tr">'
		// 					html_tr += '<td>'+v.emp_id+'</td>'
		// 					html_tr += '<td>'+v.name+'</td>'
		// 					html_tr += '<td>'+v.dep+'</td>'
		// 					html_tr += '<td>'+v.start_time+'</td>'
		// 					html_tr += '<td>'+v.end_time+'</td>'
		// 					html_tr += '<td>'+v.state+'</td>'
		// 					html_tr += '</tr>'
		// 					$('.datatitle').append(html_tr);
		// 				})

		// 			}else{
		// 				alert(res.error);
		// 			}
		// 			}
		// 	})
		}
		
	</script>

</body>


</html>